<template>
    <div ref="alarm" id="alarm" class="content">
        <div class="main_top">
            <el-form label-width="150px" class="demo-ruleForm">
                <el-form-item label="报警提醒电话" prop="pass">
                    <el-input type="text" v-model='alarm.tel'></el-input>
                </el-form-item>
                <el-form-item label="报警提醒邮箱">
                    <el-input type="text" v-model='alarm.email'></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button plain @click="save()"> 保存 </el-button>
                    <el-button plain @click="Not_saved()"> 取消 </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import Storage from '../module/Storage.js';
    import Api from '../module/domain_name.js';
    import Md5 from '../module/Md5';
    export default {
        name: 'home',
        data() {
            return {
                alarm: {}
            }
        },
        methods: {
            getalarmList() {
                const userinfo = Storage.get('userinfo');
                // 签名的实现
                var sign = Md5.sign({
                    'a': 'alarmList', //改成对应的参数值
                    'uid': userinfo.id,
                    'salt': userinfo.salt //私钥  不要传入到URL中
                })
                // 根据接口来传递参数的，文档要求uid和sign要传递过去
                const api = `${Api.getalarmListApi}&uid=${userinfo.id}&sign=${sign} `;
                // 执行提交数据  axios
                this.$http.get(api)
                    .then((response) => {
                        this.alarm = response.data.result;
                    })
                    .catch((error) => {
                        this.$message({
                            message: error,
                            type: 'warning'
                        });
                    });
            },
            save() {
                const userinfo = Storage.get('userinfo');
                var sign = Md5.sign({
                    'a': 'editAlarm',
                    'uid': userinfo.id, //用户id需要前面
                    'salt': userinfo.salt //私钥  不要传入到URL中
                })
                this.$http.post(Api.setalarmListApi, {
                        tel:this.alarm.tel,
                        email:this.alarm.email,
                        uid: userinfo.id,
                        sign: sign //签名为了数据的安全性
                    })
                    .then((response) => {
                        if(response.data.success){
                            this.$notify({
                            title: '保存',
                            message: response.data.message,
                            type: 'success'
                        });
                        }else{
                            this.$message({
                            message: response.data.message,
                            type: 'warning'
                        });
                        }
                        
                    })
                    .catch((error) => {
                        this.$message({
                            message: error,
                            type: 'warning'
                        });
                    });
            },
            Not_saved() {
                this.$notify.error({
                    title: '未保存',
                    message: '你已经取消保存'
                });
            }
        },
        mounted() {
            this.getalarmList();
             // 局部右键菜单的创建
             const alarm = this.$refs.alarm;   //获取Dom节点
            // 给Dom节点添加右键事件
            alarm.addEventListener('contextmenu', (e) => {
                // 首先要阻止浏览器默认行为
                e.preventDefault();
                // 给主进程广播事件，注意用到this需要注意他的指向
                this.$electron.ipcRenderer.send('contextmenu');
            }, false)
        },
    }
</script>

<style lang='scss' scoped>
    .main_top {
        margin: 30px 20px 0 0;

    }
</style>